<template>
  <div class="theme">
    <div v-if="comeFrom==1" class="c-fc-xblack">
      <div class="c-flex-row c-aligni-center c-justify-sb c-ph24 c-pv16">
        <div class="c-fs20 c-fw-b c-fc-xblack" :class="index == 0 ? 'c-ww260' : ''" v-for="(item,index) in rewardArr" :key="index">{{item}}</div>
      </div>
      <div class="c-hh48 c-lh48 c-textAlign-c c-bg-sgray c-fc-gray c-fs20">
        <span class="iconfont c-fs20">&#xe62c;</span>
        <span class="c-pl10">奖金发放时间：于次月1号发放</span>
      </div>
      <div class="c-ph24">
        <div v-for="(item,index) in dataInfo" :key="index" class="c-pv20 c-fs22 c-flex-row c-aligni-center c-justify-sb">
          <div class="c-ww260 c-text-ellipsis2">{{item.areaData.provinceName}}{{item.areaData.cityName}}{{item.areaData.areaName}}</div>
          <div>{{'￥' | iosPriceFilter}}{{item.monthMoney}}</div>
          <div class="c-fc-gray c-textAlign-r">{{item.date}}</div>
        </div>
      </div>
      <!-- 暂无数据 -->
      <loading-status-tem :noDataText="'暂无数据'" :noData="!isLoading && dataInfo.length <= 0"></loading-status-tem>
    </div>
    <div v-else>
      <div class="c-flex-row c-justify-center c-bd-b1-f6">
        <my-small-tabbar :tabList="tabList" :tabIndex="listType" tabNameClass="c-fs26" @changeTab="changeTab" class="c-w100"></my-small-tabbar>
      </div>
      <div class="c-ph24">
        <div class="c-bd-b1-f6 c-fs20 c-fc-xblack c-pv16 c-flex-row c-justify-sb">
          <p class="c-w18">收入来源</p>
          <p @click="clickType(1)" class="c-w30 c-textAlign-c"><span class="c-fs20 c-mr10">{{typeValText}}</span><i class="iconfont c-fs16">&#xe604;</i></p>
          <p @click="showTimeOption = true" class="c-w25 c-textAlign-c"><span class="c-fs20 c-mr10">{{selectTimeData.label || selectTimeData.value || '时间'}}</span><i class="iconfont c-fs16">&#xe604;</i></p>
          <p v-if="listType == 2" class="c-w20 c-textAlign-r"><span class="c-fs20 c-mr10">分成</span></p>
          <p v-else @click="clickType(2)" class="c-w20 c-textAlign-r"><span class="c-fs20 c-mr10">{{selctDetailValue ? detailTypeMap[selctDetailValue] : '明细'}}</span><i class="iconfont c-fs16">&#xe604;</i></p>
        </div>
        <div v-for="(item, index) in dataInfo" :key="index" class="c-flex-row c-justify-sb c-aligni-center c-pv20">
          <div class="c-w18">
            <p class="c-ww70 c-hh70 c-brp50 c-text-hidden"><img :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" class="c-w100" alt=""></p>
            <p class="c-fs20 c-fc-sblack c-mt6">{{item.nickname || '未知'}}</p>
          </div>
          <p class="c-fs22 c-fc-xblack c-textAlign-c">{{typeText(item)}}</p>
          <div class="c-fs20 c-fc-gray c-textAlign-c" v-if="item.createdAt">
            <p>{{item.createdAt.split(' ')[0]}}</p><p>{{item.createdAt.split(' ')[1]}}</p>
          </div>
          <div class="c-fs22 c-textAlign-r">
            <p v-if="!(filterType == 2 && selctDetailValue == 2)" class="theme-fc c-flex-row c-aligni-center">
              <span class="theme-bg c-fs16 c-fc-white" v-if="listType == 1">分</span>￥{{item.money}}
            </p>
            <p class="c-fc-gray" v-if="listType == 1 && !(filterType == 2 && selctDetailValue == 1)">￥{{item.payMoney}}</p>
          </div>
        </div>
        <!-- 暂无数据 -->
        <loading-status-tem :noDataText="'暂无数据'" :noData="!isLoading && dataInfo.length <= 0"></loading-status-tem>
      </div>
    </div>

    <div class="c-fc-gray c-fs20 c-textAlign-c c-pv20" v-if="(isLoading || loadingStatus == 'NO_MORE_DATA') && !noneShow">{{loadingStatus == 'NO_MORE_DATA' ? '- 没有更多了 -' : '加载中...'}}</div>
    <!-- 类型，明细筛选 -->
    <cj-popup v-model="showTypeSelect" round position="bottom">
      <div class="c-flex-row c-justify-sb c-fs26 c-fc-xblack c-hh80 c-aligni-center c-bd-b1-f6">
        <div @click="cancelButton" class="c-h c-flex-row c-aligni-center c-ph24">取消</div>
        <div @click="confirmButton" class="c-h c-flex-row c-aligni-center c-ph24">确定</div>
      </div>
      <div class="c-maxh600 c-contexty-auto">
        <div v-for="(item, index) in selectTypeOptions" :key="index" v-show="item.isShow"
          @click="changeSelectType(item, index)"
          class="c-textAlign-c c-pv20 c-bd-b1-f6 c-fs26"
          :class="isSelected(item) ? 'theme-fc' : ' c-fc-sblack'">{{item.label}}</div>
      </div>
    </cj-popup>
    <!-- 时间筛选 -->
    <time-popup :showPopup="showTimeOption" @clickConfirm="timeGetData" @clickCancel="timeGetData"></time-popup>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import timePopup from '@/components/homePage/newAreaAgent/selectTimePopup.vue'
import validateVipType from './validateVipType'
let pageIndex = 1
export default {
  name: 'areaIncome',
  mixins: [validateVipType],
  components: {
    MySmallTabbar,
    timePopup,
    loadingStatusTem,
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      tabList: [{
        title: '服务奖',
        index: 1,
      }, {
        title: '达标奖',
        index: 2,
      }],
      listType: 1,
      noneShow: false,
      loadingStatus: "NO_MORE_DATA", //显示加载更多LOAD_MORE 加载中 LOADING 没有更多 NO_MORE_DATA
      isLoading: false,
      serviceTypeMap: {
        1: 'VIP服务奖',
        23: 'SVIP服务奖'
      },
      achieveTypeMap: {
        1: '月达标奖',
        2: '季度达标奖'
      },
      detailTypeMap: {
        1: '分成',
        2: '金额'
      },
      showTimeOption: false,
      selectTimeData: { // 时间的筛选，默认给0 3 近期 本月的数据
        type: 0,
        value: 3,
        label: '本月'
      }, // 选择的时间
      selectTypeOptions: [], // 筛选的数据 类型 明细等 看选择的是哪个数据，这个字段表示页面上显示的值
      serviceTypeOptions: [
        {label: '全部', value: '', isShow: true},
        {label: 'VIP服务奖', value: 1, isShow: true},
        {label: 'SVIP服务奖', value: 23, isShow: JSON.parse(localStorage.getItem("companyAuth")).enableSvipModule == 1}
      ],
      reachOptions: [
        {label: '全部', value: '', isShow: true},
        {label: '月达标奖', value: 1, isShow: true},
        {label: '季达标奖', value: 2, isShow: true}
      ],
      detailOptions: [
        {label: '全部', value: '', isShow: true},
        {label: '分成', value: 1, isShow: true},
        {label: '金额', value: 2, isShow: true}
      ],
      showTypeSelect: false,
      selctTypeValue: '', // 筛选的值
      selctDetailValue: '', // 明细筛选的值
      filterType: 1, // 筛选的类型 1 是类型 2 是明细
      limit: 20,
      dataInfo: [],
      auId: '',
      comeFrom: 0, //0胜者定制 1徐鸿定制
      rewardArr: ['收入来源', '奖金', '奖金月份'],
    }
  },
  computed: {
    typeText() { // 显示的类型文字
      return function (item) {
        if (this.listType == 1) {
          return this.serviceTypeMap[item.type] || ''
        } else {
          return this.achieveTypeMap[item.type] || ''
        }
      }
    },
    typeValText() { // 筛选类型的文字显示（服务奖: vip ,svip） 达标奖： 季度和月达标
      if (this.listType == 1) {
        return this.selctTypeValue ? this.serviceTypeMap[this.selctTypeValue] : '类型'
      } else {
        return this.achieveTypeMap[this.selctTypeValue] || '类型'
      }
    },
    isSelected() {
      return function (item) {
        return this.filterType == 1 ? this.selctTypeValue == item.value : this.selctDetailValue == item.value
      }
    }
  },
  methods: {
    initData() { // 初始化数据
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      let $this = this;
      /***
       * type,0 近期，1月份，2季度
          limit: 条数,
          time: 筛选时间
          prodType：1 vip 23 svip（服务奖）
          incomeType:  1 服务奖，2达标奖
       */
      let type = 0
      let time = 3
      let prodType = ''
      let rewardType = ''
      if (this.comeFrom == 0) {
        type = this.selectTimeData.type || 0
        time = this.selectTimeData.value || 3
        prodType = this.listType == 1 ? this.selctTypeValue : ''
        rewardType = this.listType == 2 ? this.selctTypeValue : ''
      }
      let url = this.comeFrom == 1 ? `xhAreaUser/getWxRewardList?page=${pageIndex}&limit=10` : `areaUser/getAreaUserIncome?auId=${this.auId}&incomeType=${this.listType}&type=${type}&time=${time}&prodType=${prodType}&page=${pageIndex}&limit=${this.limit}&rewardType=${rewardType}`;
      utilJs.getMethod(global.apiurl + url, res => {
        if (pageIndex != res.data.current_page) {
          pageIndex = res.data.current_page;
        }
        if (pageIndex == 1) {
          if (this.comeFrom == 1) {
            $this.dataInfo = res.data;
          } else {
            $this.dataInfo = res.data.data;
          }
        } else {
          if (this.comeFrom == 1) {
            $this.dataInfo = [...$this.dataInfo, ...res.data];
          } else {
            $this.dataInfo = [...$this.dataInfo, ...res.data.data];
          }
        }
        if ($this.dataInfo.length == 0) {
          $this.noneShow = true;
          $this.loadingStatus = "NO_MORE_DATA";
        } else {
          $this.noneShow = false;
        }
        if (!res.data.next_page_url) {
          $this.loadingStatus = "NO_MORE_DATA";
        } else {
          $this.loadingStatus = 'LOAD_MORE';
          pageIndex++
        }
        $this.isLoading = false;
      });
    },
    changeTab(index) { // 更改列表类型 服务奖 达标奖
      this.listType = index
      this.selctTypeValue = '' // 类型筛选的值清空一下
      this.selctDetailValue = ''
      pageIndex = 1
      this.dataInfo = []
      this.initData()
    },
    clickType(type) { // 筛选 类型和明细筛选
      this.filterType = type // 1 是类型 2 是明细
      if (type == 1) { // 类型
        this.selectTypeOptions = this.listType == 1 ? this.serviceTypeOptions : this.reachOptions // 服务奖与达标奖
      } else { // 明细
        this.selectTypeOptions = this.detailOptions
      }
      this.showTypeSelect = true
    },
    changeSelectType(item, index) { // 筛选
      if (this.filterType == 1) {
        this.selctTypeValue = item.value
      } else {
        this.selctDetailValue = item.value
      }
    },
    cancelButton() { // 类型明细筛选的取消
      this.showTypeSelect = false
      if (this.filterType != 2) { // 明细筛选是前端 类型筛选要请求接口
        this.selctTypeValue = ''
        pageIndex = 1
        this.dataInfo = []
        this.initData()
      } else {
        this.selctDetailValue = ''
      }
    },
    confirmButton() { // 类型明细筛选的确定
      this.showTypeSelect = false
      if (this.filterType != 2) { // 明细筛选是前端 类型筛选要请求接口
        pageIndex = 1
        this.dataInfo = []
        this.initData()
      }
    },
    timeGetData(data) {
      this.showTimeOption = false;
      if (!data) {
        return;
      }
      this.selectTimeData = data
      this.initData();
    },
    //分享
    wechatShare: function () {
      let title = this.comeFrom == 1 ? '月度奖' : '会长收入';
      let shareImg = 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/common/provider.png';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?comeFrom=${this.comeFrom}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
      //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.loadingStatus == 'LOAD_MORE') {
          that.initData()
        }
      });
    }
  },
  activated() {
    this.comeFrom = this.$route.query.comeFrom;
    if (this.comeFrom == 1) {
      setDocumentTitle('月度奖')// eslint-disable-line
    } else {
      setDocumentTitle('会长收入')// eslint-disable-line
    }
    this.auId = this.$route.query.auId || ''
    this.isLoading = false;
    this.loadingStatus = 'LOAD_MORE';
    this.dataInfo = [];
    pageIndex = 1
    this.isAgentVipType().then(res => { // 验证服务商身份，不是的话跳转回个人中心
      this.initData();
    })
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    this.loadingStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>
<style scoped>
</style>